<!-- dubbo测试页面 -->
<#include "../layout/layout.ftl"/>
<@body>
    <link href="/lib/jsoneditor/css/jsoneditor.min.css" rel="stylesheet" />
    <script src="/lib/jsoneditor/js/jsoneditor.min.js"></script>
<script src="/script/tool/dubbo.js"></script>
    <div class="container-fluid">
        <div class="panel panel-default" style="padding-bottom: 20px">
            <div class="panel-heading">请求</div>
            <div class="row">
                <label class="col-md-1">zookeeper地址:</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="zkAddress" value="${zkAddress}">
                </div>
            </div>
            <div class="row">
                <label class="col-md-1">接口名称:</label>
                <div class="col-md-10">
                    <select class="form-control" id="interfaceName">
                        <#if interfaceList??>
                            <#list interfaceList as interfaceName>
                                <option value="${interfaceName}">${interfaceName}</option>
                            </#list>
                        </#if>
                    </select>
                    <#--<input type="text" class="form-control" id="interfaceName"> -->
                </div>
            </div>
            <div class="row">
                <label class="col-md-1">IP端口号:</label>
                <div class="col-md-3">
                    <select class="form-control" id="ip">

                    </select>
                </div>
                <label class="col-md-1">方法名称:</label>
                <div class="col-md-6">
                    <select class="form-control" id="interfaceMethod" onchange="switchParamTemplate()">
                    </select>
                </div>
            </div>
            <div class="row">
                <label class="col-md-1">编码:</label>
                <div class="col-md-1">
                    <select class="form-control" id="encoding">
                        <option value="UTF-8">UTF-8</option>
                        <option value="GBK">GBK</option>
                    </select>
                </div>
                <label class="col-md-1">超时(秒):</label>
                <div class="col-md-1">
                    <select class="form-control" id="timeout">
                        <option value="5000">5</option>
                        <option value="6000">6</option>
                        <option value="7000">7</option>
                        <option value="8000">8</option>
                        <option value="9000">9</option>
                        <option value="10000">10</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <input type="button" class="btn btn-primary" id="resolveIP" onclick="resolveIP()" value="解析IP">
                    <input type="button" class="btn btn-primary" id="resolveMethod" onclick="resolveMethod()" value="解析方法">
                    <input type="button" class="btn btn-primary" id="invoke" onclick="invoke()" value="执行调用">
                </div>
            </div>
        </div>
        <div class="panel panel-default"
             style="height: 564px; float: left;width: 49.5%;margin-right: 0.5%">
            <div class="panel-heading">
                <span style="text-align: left">入参</span>
            </div>
            <div class="row form-group-lg" style="margin: 0 0 0 0">
                <div type="text" class="form-control"
                     style="height: 522px; border: 0px" >
                    <#--<textarea class="form-control" style="height: 100%;border: 0px" id="param"></textarea>-->
                    <div id="param">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default"
             style="padding-bottom: 20px; height: 564px; float: left;width: 49.5%;margin-left: 0.5%">
            <div class="panel-heading">
                <span style="text-align: left">响应</span>
                <span style="text-align: right;color: green;padding-left: 10px" id="success"></span>
                <span style="text-align: right;color: red;padding-left: 10px" id="error"></span>
            </div>
            <div class="row form-group-lg" style="margin: 0 0 0 0">
                <div type="text" class="form-control"
                     style="height: 522px; border: 0px" id="result">
                    <div id="result"></div>
                    <#--<textarea class="form-control" style="height: 100%;border: 0px" id="result"></textarea>-->
                </div>
            </div>
        </div>
    </div>
    <style>
        .row {
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
    <script>
        //json的配置文件，主要是确定使用的格式
        var jsonOptions = {
            mode: "tree", modes: ["code","tree", "text"],
            onError: function (err) {
                alert(err.toString());
            }
        };
        var container=document.getElementById("param");
        var paramEditor=new JSONEditor(container,jsonOptions);
        var result=document.getElementById("result");
        var resultEditor =new JSONEditor(result,jsonOptions);
        // var obj ={"name":"xiaoli"};
        // jsonEditor.set(obj)
    </script>
</@body>